'use client';

import { useState } from 'react';

export default function TailwindLearnPage() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={`min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'} transition-colors duration-200`}>
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <header className="flex justify-between items-center mb-12">
          <div></div> {/* Spacer for flex alignment */}
          <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
            Tailwind CSS 学习指南
          </h1>
          <button 
            onClick={() => setDarkMode(!darkMode)}
            className={`px-4 py-2 rounded-lg font-semibold ${
              darkMode 
                ? 'bg-gray-700 hover:bg-gray-600 text-white' 
                : 'bg-gray-200 hover:bg-gray-300 text-gray-800'
            } transition-colors`}
          >
            {darkMode ? '浅色模式' : '深色模式'}
          </button>
        </header>

        {/* Introduction */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">介绍</h2>
          <p className="text-lg mb-4">
            Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了低级的工具类来构建设计，而不是预设的组件。
          </p>
          <p className="text-lg">
            通过组合这些工具类，您可以快速构建现代响应式网站，而无需编写自定义 CSS。
          </p>
        </section>

        {/* Layout Examples */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">布局系统</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
              <h3 className="text-xl font-bold mb-4">Flexbox</h3>
              <div className="flex items-center justify-between bg-blue-100 p-4 rounded-lg mb-4">
                <div className="w-16 h-16 bg-blue-500 rounded-md"></div>
                <div className="w-16 h-16 bg-blue-500 rounded-md"></div>
                <div className="w-16 h-16 bg-blue-500 rounded-md"></div>
              </div>
              <div className="flex flex-col items-center bg-green-100 p-4 rounded-lg">
                <div className="w-16 h-16 bg-green-500 rounded-md mb-2"></div>
                <div className="w-16 h-16 bg-green-500 rounded-md mb-2"></div>
                <div className="w-16 h-16 bg-green-500 rounded-md"></div>
              </div>
            </div>

            <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
              <h3 className="text-xl font-bold mb-4">Grid</h3>
              <div className="grid grid-cols-3 gap-4 mb-4">
                {[1, 2, 3, 4, 5, 6].map((item) => (
                  <div key={item} className="h-16 bg-purple-500 rounded-md flex items-center justify-center text-white font-bold">
                    {item}
                  </div>
                ))}
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="h-24 bg-yellow-500 rounded-md flex items-center justify-center text-white font-bold">
                  1
                </div>
                <div className="h-24 bg-yellow-500 rounded-md flex items-center justify-center text-white font-bold">
                  2
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Spacing and Sizing */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">间距和尺寸</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg mb-8`}>
            <h3 className="text-xl font-bold mb-4">Padding 和 Margin</h3>
            <div className="space-y-4">
              <div className="bg-red-100 p-4">
                <div className="bg-red-300 p-2">p-2 (padding: 0.5rem)</div>
              </div>
              <div className="bg-blue-100 p-4">
                <div className="bg-blue-300 p-4">p-4 (padding: 1rem)</div>
              </div>
              <div className="bg-green-100 p-4">
                <div className="bg-green-300 p-8">p-8 (padding: 2rem)</div>
              </div>
            </div>
          </div>

          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <h3 className="text-xl font-bold mb-4">宽度和高度</h3>
            <div className="flex flex-wrap gap-4">
              <div className="w-16 h-16 bg-indigo-500 rounded-md"></div>
              <div className="w-24 h-24 bg-indigo-500 rounded-md"></div>
              <div className="w-32 h-32 bg-indigo-500 rounded-md"></div>
              <div className="w-1/4 h-16 bg-indigo-500 rounded-md"></div>
              <div className="w-1/2 h-16 bg-indigo-500 rounded-md"></div>
            </div>
          </div>
        </section>

        {/* Colors */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">颜色系统</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <h3 className="text-xl font-bold mb-4">背景色和文字色</h3>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {['red', 'blue', 'green', 'yellow', 'purple', 'pink'].map((color) => (
                <div key={color} className="flex flex-col space-y-2">
                  <div className={`h-16 rounded-md bg-${color}-500`}></div>
                  <div className={`px-2 py-1 rounded text-center text-${color}-500 font-medium bg-${color}-100`}>
                    {color}-500
                  </div>
                </div>
              ))}
            </div>
            
            <h3 className="text-xl font-bold mt-8 mb-4">深色模式支持</h3>
            <div className="flex flex-wrap gap-4">
              <div className={`px-4 py-2 rounded-lg ${darkMode ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-800'}`}>
                根据模式变化
              </div>
              <div className="px-4 py-2 rounded-lg bg-gray-800 text-white">
                深色背景
              </div>
              <div className="px-4 py-2 rounded-lg bg-gray-200 text-gray-800">
                浅色背景
              </div>
            </div>
          </div>
        </section>

        {/* Typography */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">排版</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <h3 className="text-xl font-bold mb-4">字体大小和粗细</h3>
            <div className="space-y-2">
              <p className="text-xs">这是 xs 文字 (0.75rem)</p>
              <p className="text-sm">这是 sm 文字 (0.875rem)</p>
              <p className="text-base">这是 base 文字 (1rem)</p>
              <p className="text-lg">这是 lg 文字 (1.125rem)</p>
              <p className="text-xl">这是 xl 文字 (1.25rem)</p>
              <p className="text-2xl">这是 2xl 文字 (1.5rem)</p>
              <p className="text-3xl">这是 3xl 文字 (1.875rem)</p>
            </div>
            
            <h3 className="text-xl font-bold mt-8 mb-4">文字对齐</h3>
            <div className="space-y-2">
              <p className="text-left">左对齐文字</p>
              <p className="text-center">居中对齐文字</p>
              <p className="text-right">右对齐文字</p>
            </div>
            
            <h3 className="text-xl font-bold mt-8 mb-4">字体粗细</h3>
            <div className="space-y-2">
              <p className="font-light">这是细体文字 (font-weight: 300)</p>
              <p className="font-normal">这是正常文字 (font-weight: 400)</p>
              <p className="font-medium">这是中等文字 (font-weight: 500)</p>
              <p className="font-semibold">这是半粗体文字 (font-weight: 600)</p>
              <p className="font-bold">这是粗体文字 (font-weight: 700)</p>
            </div>
          </div>
        </section>

        {/* Borders */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">边框</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="h-16 border border-gray-300 rounded flex items-center justify-center">
                默认边框
              </div>
              <div className="h-16 border-2 border-blue-500 rounded flex items-center justify-center">
                蓝色边框
              </div>
              <div className="h-16 border-4 border-green-500 rounded-full flex items-center justify-center">
                圆形绿边框
              </div>
              <div className="h-16 border-t-4 border-purple-500 rounded flex items-center justify-center">
                顶部边框
              </div>
            </div>
          </div>
        </section>

        {/* Effects */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">效果</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="h-16 bg-blue-500 rounded-md shadow-md flex items-center justify-center text-white">
                阴影效果
              </div>
              <div className="h-16 bg-green-500 rounded-md opacity-50 flex items-center justify-center text-white">
                透明度
              </div>
              <div className="h-16 bg-purple-500 rounded-md hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white">
                悬停缩放
              </div>
            </div>
          </div>
        </section>

        {/* Responsive Design */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">响应式设计</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <p className="mb-4">调整浏览器窗口大小查看响应式效果</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              <div className="h-16 bg-red-500 rounded-md flex items-center justify-center text-white">
                <span className="sm:hidden">XS</span>
                <span className="hidden sm:block md:hidden">SM</span>
                <span className="hidden md:block lg:hidden">MD</span>
                <span className="hidden lg:block">LG</span>
              </div>
              <div className="h-16 bg-blue-500 rounded-md flex items-center justify-center text-white">
                <span className="sm:hidden">XS</span>
                <span className="hidden sm:block md:hidden">SM</span>
                <span className="hidden md:block lg:hidden">MD</span>
                <span className="hidden lg:block">LG</span>
              </div>
              <div className="h-16 bg-green-500 rounded-md flex items-center justify-center text-white">
                <span className="sm:hidden">XS</span>
                <span className="hidden sm:block md:hidden">SM</span>
                <span className="hidden md:block lg:hidden">MD</span>
                <span className="hidden lg:block">LG</span>
              </div>
              <div className="h-16 bg-yellow-500 rounded-md flex items-center justify-center text-white">
                <span className="sm:hidden">XS</span>
                <span className="hidden sm:block md:hidden">SM</span>
                <span className="hidden md:block lg:hidden">MD</span>
                <span className="hidden lg:block">LG</span>
              </div>
            </div>
          </div>
        </section>

        {/* Interactive Elements */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-6 pb-2 border-b-2 border-blue-500">交互元素</h2>
          
          <div className={`p-6 rounded-xl ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
            <div className="flex flex-wrap gap-4">
              <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
                默认按钮
              </button>
              <button className="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 active:bg-green-700 transition-colors font-medium">
                状态按钮
              </button>
              <button className="px-6 py-3 bg-purple-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed font-medium">
                禁用按钮
              </button>
              <button className="px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-lg hover:bg-blue-500 hover:text-white transition-colors font-medium">
                轮廓按钮
              </button>
            </div>
            
            <div className="mt-8">
              <input 
                type="text" 
                placeholder="输入框示例" 
                className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="mt-16 pt-8 border-t border-gray-300 text-center">
          <p className="text-lg">
            这是一个完整的 Tailwind CSS 学习页面，展示了各种常用的 Tailwind 类和功能。
          </p>
          <p className="mt-2 text-gray-600">
            通过实际示例学习如何使用 Tailwind CSS 构建现代化的响应式网站。
          </p>
        </footer>
      </div>
    </div>
  );
}